import React, { Component } from 'react'
import axios from "axios"
import { Button,Table,Space,Pagination,Popconfirm, message} from 'antd'

import "./Classify.css"
import Add from "./components/Add"
import Update from "./components/Update"
// const {Column} =Table
export default class Classify extends Component {
  state={
    count:0,
    currPage:1,
    managerList:[],
    addVisible:false,
    updateVisible:false,
    // 设置managerList.role
    role:true,
    list:{},
    clone:true,
  }
  // 分类查询功能
  componentDidMount(){
    this.getManagerList(1)
  }
  getManagerList=(page)=>{
    axios.get("/api/payment/classify/list",{params:{
      page:page,
      limit:10
    }}).then(res=>{
      if(res.data.code===200){
        console.log("$",res.data)
        this.setState({
          // 当前页
          currPage:res.data.page.currPage,
          // 总页数
          count:res.data.page.totalCount,
          managerList:res.data.page.list
        })
      }
    },   //成功的回调
    error =>{
      console.log(error)
    }) //失败的回调
  }
  // 打开添加组件模块
  openAdd=()=>{
    this.setState({
      addVisible:true
    })
  }
  // 关闭添加组件模块
  closeAdd=()=>{
    // const {totalPage} = this.state
    this.setState({
      addVisible:false,
      clone:false,
    })
    this.getManagerList(1)
  }
  // 打开修改组件模块
  openUpdate =(text)=>{
      return ()=>{
        this.setState({
          updateVisible:true,
          list:text,
        })
        // console.log(text)
      }
    
  }
  // 关闭修改组件模块
  closeUpdate = ()=>{
    const {currPage} = this.state
    // console.log("@",currPage)
    this.setState({
      updateVisible:false,
      clone:false,
    })
    this.getManagerList(currPage)
  }
  // 删除方法
  confirm=(record)=>{
    return ()=>{
      const {currPage} = this.state
      const ids = [record.id]
      console.log(record.id);
      axios.post("/api/payment/classify/delete",
        ids
      ).then(response => {
        message.success('删除成功！');
        this.getManagerList(currPage)
      },   //成功的回调
      error =>{
        message.error('删除失败！');
      }) //失败的回调
    
    }
  }
  // 取消错误
  cancel=(e)=> {
    message.success('取消删除！');
  }

  render() {
   const {list,managerList,count,currPage,addVisible,updateVisible}=this.state
   // table列表
   const columns = [
    {
      title: '编号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '分类名',
      dataIndex: 'classifyName',
      rowkey: 'id',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        //fragment
      <Space style={{display:"flex",justifyContent:"center"}}>
      <Button type='primary' size='small' onClick={this.openUpdate(text)}>修改</Button>
      <Popconfirm
          title="你确认要删除这一条信息嘛？"
          onConfirm={this.confirm(record)}
          onCancel={this.cancel}
          okText="确认"
          cancelText="取消"
          type='primary' size='small'
      >
          <Button style={{color:"red"}}>删除</Button>
      </Popconfirm>
      </Space>
      ),
    },
  ];
    return (
      <div>
        <Button type='primary' style={{marginBottom:"20px"}} onClick={this.openAdd}>添加新分类</Button>
        
        <Table columns={columns} rowKey="id" dataSource={managerList} bordered size="small" pagination={false} />
          {/* total总页数 currPage:当前页 */}
        <Pagination style={{position:"fixed",bottom:"15px"}} hideOnSinglePage={false} defaultPageSize={10} total={count} onChange={this.getManagerList} current={currPage}></Pagination> {/* */}
        <Add addVisible={addVisible} closeAdd={this.closeAdd}></Add>
        <Update key={list.id} list={list} updateVisible={updateVisible} closeUpdate={this.closeUpdate}></Update>
      </div>
    )
  }
}
